<template>
	<view theme="defined">
		<x-loading></x-loading>
		<view class="title">首页</view>
		<div class="bbb" :style="{ 'font-size': fontSize1 + 'px' }">首页首页首页</div>

		<uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
		<uv-switch v-model="loading"></uv-switch>
		<uv-button @tap="choseFile">切换xloading</uv-button>

		<view class="swiper-box">
			<z-swiper ref="zSwiper" direction="vertical" v-model:list="list">
				<z-swiper-item v-for="(item, index) in list" :key="index">
					<view class="swiper-item">{{ item.text }}</view>
				</z-swiper-item>
			</z-swiper>
		</view>

		<!-- <uv-tabbar>
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
			<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar> -->
	</view>
</template>

<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app';
import { ref, watch, computed, reactive } from 'vue';
import { useStore } from 'vuex';

let loading = ref(true);
let skeleton = reactive([
	{
		type: 'line',
		num: 2,
		gap: '20px'
	}
]);

let color = ref('red');
let fontSize1 = ref(60);

let props = defineProps({
	foo: String
});

let store = useStore();

// store.dispatch('queryUserInfo');

let fontSize = ref(store.state.fontSize + 'rpx');

const choseFile = () => {
	store.state.showLoading = true;

	console.log('获取', store.state.showLoading);
};
const list = ref(
	Array.from({
		length: 5
	}).map((item, index) => {
		return {
			text: `Slide ${index + 1}`,
			id: index + 1
		};
	})
);

onShow(() => {
	console.log('onShow');
	// console.log("获取主题", store.state.theme);
});

onLoad(() => {
	console.log('onLoad');
});

// )
</script>

<style lang="scss">
.bbb {
	// color: var(--color-red);
	color: v-bind(color);
	// font-size: v-bind(fontSize);
}
</style>
